<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body{
            margin:0;
            padding:0;
            background:#000;
            color:#fff;
        }
        #main-doc {
            display: flex;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }

        #navbar {
            width: 300px;
            display: flex;
            flex-direction: column;
            /*border-left:1px solid #ccc;*/
            border-right:1px solid #ccc;
            background: #000;
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            z-index:10086;
        }

        .main {
            display: flex;
            flex-direction: column;
            flex-grow:2;
            margin-left:300px;
        }
        #navbar header {
            font-size: 30px;
            font-weight: 400;
            padding:10px;
            border-bottom:1px solid #ccc;
        }

        a[class*="nav-link"]{
            display:block;
            font-size:20px;
            color: #FFF;
            text-decoration: none;
            padding: 20px 30px;
            border-bottom: 1px solid #ccc;
            transition: .2s;
        }
        a[class*="nav-link"]:hover{
            color:#434343;
            background:#fff;
            box-shadow:0 0 50px #000 inset;
        }
        .main {
            padding: 30px;
        }
        .main .main-section{
            margin: 30px 0;
            padding: 30px;
            border-bottom: 1px solid #ccc;
        }
        .main .main-section header{
            font-size:28px;
            margin-bottom: 50px;
        }
        .main .main-section:nth-last-child(1){
            border:0 solid;
        }
        code{
            display: block;
            margin: 30px;
            padding:30px;
            background: #303030;
        }
        p {
            font-size:16px;
            padding:20px 0;
        }

        li {
            list-style:none;
            background: #6f6f6f;
            padding:10px;
            position: relative;
            font-style:italic;
        }

        @media screen and (max-width: 474px) {
            #navbar {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<main id="main-doc">
    <nav id="navbar">
        <header>Doc Demo</header>
        <a href="#main_1" class="nav-link">main 1</a>
        <a href="#main_2" class="nav-link">main 2</a>
        <a href="#main_3" class="nav-link">main 3</a>
        <a href="#main_4" class="nav-link">main 4</a>
        <a href="#main_5" class="nav-link">main 5</a>
    </nav>
    <div class="main">
        <section class="main-section" id="main_1">
            <header>main 1</header>
            <p>this is content start</p>
            <code>
                function demo (){
                //there is demo code
                }
            </code>
            <p>this is content end</p>
            <p>this is content end</p>
            <p>this is content end</p>
            <li>some tips</li>
        </section>
        <section class="main-section" id="main_2">
            <header>main 2</header>
            <p>this is content start</p>
            <code>
                function demo (){
                //there is demo code
                }
            </code>
            <p>this is content end</p>
            <li>some tips</li>
            <li>some tips</li>
            <li>some tips</li>
        </section>
        <section class="main-section" id="main_3">
            <header>main 3</header>
            <p>this is content start</p>
            <p>this is content start</p>
            <p>this is content start</p>
            <p>this is content start</p>
            <code>
                function demo (){
                //there is demo code
                }
            </code>
            <p>this is content end</p>
            <li>some tips</li>
        </section>
        <section class="main-section" id="main_4">
            <header>main 4</header>
            <p>this is content start</p>
            <p>this is content start</p>
            <p>this is content start</p>
            <p>this is content start</p>
            <code>
                function demo (){
                //there is demo code
                }
            </code>
            <p>this is content end</p>
            <p>this is content end</p>
            <li>some tips</li>
            <li>some tips</li>
            <li>some tips</li>
            <li>some tips</li>
        </section>
        <section class="main-section" id="main_5">
            <header>main 5</header>
            <p>this is content start</p>
            <code>
                function demo (){
                //there is demo code
                }
            </code>
            <p>this is content end</p>
            <li>some tips</li>
        </section>
    </div>
</main>
</body>
</html>